<!--
 * @Author: aster lipian1004@163.com
 * @Date: 2025-07-31 13:22:20
 * @FilePath: \aster-flowable-vue\src\views\workflow\components\config\html-config.vue
 * @Description: html 配置
 * Copyright (c) 2025 by Aster, All Rights Reserved.
-->
<template>
  <div v-if="_formItem">
    <el-form-item :label="t('workflow.component.name')">
      <template #label>
        <div class="flex justify-between items-center">
          <span>{{ t('workflow.component.name') }}</span>
          <span class="text-xs font-normal">HTML</span>
        </div>
      </template>
      <el-input v-model="_formItem.title" :maxlength="TITLE_MAXLENGTH" />
    </el-form-item>
    <el-form-item label="渲染方式">
      <el-radio-group v-model="_formItem.props.type">
        <el-radio label="html嵌入" value="html" />
        <el-radio label="Iframe" value="iframe" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="窗口高度" v-if="_formItem.props.type === 'iframe'">
      <el-input type="number" v-model="_formItem.props.height" placeholder="请设置iframe高度">
        <template #append>px</template>
      </el-input>
    </el-form-item>
    <el-form-item label="是否远程加载" v-if="_formItem.props.type === 'iframe'">
      <el-switch v-model="_formItem.props.isRemote" />
    </el-form-item>
    <el-form-item v-if="_formItem.props.type === 'iframe' && _formItem.props.isRemote">
      <template #label>
        <span>远程加载URL</span>
        <el-tooltip content="只支持GET请求" placement="top">
          <span class="tooltip"><i class="iconfont icon-tishi !text-sm"></i></span>
        </el-tooltip>
      </template>
      <el-input
        type="textarea"
        :rows="2"
        v-model="_formItem.props.code"
        placeholder="请输入远程加载URL"
      />
    </el-form-item>
    <el-form-item v-else label="html内容">
      <el-input
        type="textarea"
        :rows="4"
        v-model="_formItem.props.code"
        placeholder="请输入html代码"
      />
    </el-form-item>
    <el-form-item label="传递参数" v-if="_formItem.props.isRemote">
      <el-input type="button" :model-value="`请设置URL参数`" @click="openUrlParams" />
    </el-form-item>
    <el-form-item label="隐藏名称">
      <el-switch v-model="_formItem.props.hiddenName" />
    </el-form-item>

    <url-param ref="urlParamRef" v-if="_formItem.props.isRemote" @callback="setParams" />
  </div>
</template>
<script setup lang="ts">
  import { useWorkFlowStore } from '@/stores/modules/workflow';
  import { computed, ref } from 'vue';
  import { useI18n } from 'vue-i18n';
  import { TITLE_MAXLENGTH } from '@/config/formConfig';
  import UrlParam from '../common/url-param.vue';
  import { isNotEmpty } from '@/utils';
  import { ElMessage } from 'element-plus';

  // 国际化
  const { t } = useI18n();
  // 工作流store
  const workFlowStore = useWorkFlowStore();
  // 注册组件
  const urlParamRef = ref();

  /**
   * @description: 处理URL参数
   */
  const openUrlParams = () => {
    if (_formItem.value && isNotEmpty(_formItem.value.props.code)) {
      urlParamRef.value.init(_formItem.value?.props.remoteParams || []);
    } else {
      ElMessage.error('请先设置远程加载URL');
    }
  };

  /**
   * @description: 设置URL参数
   */
  const setParams = (value: WorkComponent.UrlParams[]) => {
    if (_formItem.value && value && value.length > 0) {
      _formItem.value.props.remoteParams = value;
    }
  };

  // 选中的组件
  const _formItem = computed(() => {
    return workFlowStore.selectFormItem;
  });
</script>
<style scoped lang="scss">
  .tooltip {
    font-weight: 100;
    padding-left: 5px;
  }
</style>
